<template>
  <SeachTable 
    :tableType="1"
    ref="seachTableRef"
    :forms="tableForms"
    :btnLefts="btnLefts"
    :btnRights="btnRights"
    :tableLoading="tableLoading"
    :tableConfig="tableConfig"
    :tableData="tableData"
    :totalPage="totalPage"
    @handlerSearch="handlerSearch"
  >
    <template #productCode="{row}">
      <span class="code" @click="toDetail(row)">{{ row.code }}</span>
    </template>
    <template #productName="{row}">
      <div class="flex align-items-center">
        <el-image class="productImg" :preview-src-list="[row.firstPicture || 'https://static.91medicine.net/jiuyang/img/404.png']" :src="row.firstPicture || 'https://static.91medicine.net/jiuyang/img/404.png'" fit="contain" />
        <div style="width:200px">
          <div class="uni-ellipsis productName">{{ row.productName }}</div>
          <div class="uni-ellipsis" style="color:#666">{{ row.specification + (row.specification && row.unit?"/":"") + row.unit }} {{ row.manufacturer }}</div>
        </div>
      </div>
    </template>
    <template #homePageDisplay="{row}">
      <el-switch
        :value="row.showIndex"
        :active-value="1"
        :inactive-value="0"
        @change="handlerHomePageDisplay(row)"
      />
    </template>
  </SeachTable>
</template>

<script setup>
import { updateShowIndex } from '@/api/ShopDatabase/index';
import { useConfirm,useTableRefresh } from '@/hooks';
import { useCurd, } from './Hooks/index';

const {
  seachTableRef,
  tableLoading,
  totalPage,
  tableData,
  btnLefts,
  btnRights,
  tableConfig,
  tableForms,
  handlerSearch,
} = useCurd();

const router = useRouter();
const toDetail = (row)=>{
  router.push({name:'ProductManagementDetail',query:{id:row.id}})
}
const handlerHomePageDisplay = (row)=>{
  if(row?.showIndex === undefined) return;
  ElMessageBox.confirm('确定要修改吗？','提示',{
    type:'warning',
    beforeClose:async (action,instance,done)=>{
      const func = async ()=>{
        try{
          await updateShowIndex({
            id:row.id,
            showIndex:row.showIndex ? 0 : 1
          })
          return true
        }catch(e){
          return false
        }
      }
      const res = await useConfirm(action,instance,done,func)
      console.log('res', res)
      if(res){
        row.homePageDisplay = !row.homePageDisplay
        useTableRefresh(seachTableRef,true)
        ElMessage.success('修改成功')
      }
    }
  })
}
</script>

<style lang="less" scoped>
.productImg{
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid #DDD;
  border-radius: 4px;
  margin-right: 8px;
}
.productName{
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}
.code{
  font-size: 14px;
  color: #3480FF;
  cursor: pointer;
}
</style>